<!--
 * @Author: 东山 1714145874@qq.com
 * @Date: 2025-08-05 23:04:27
 * @LastEditors: 东山 1714145874@qq.com
 * @LastEditTime: 2025-08-05 23:07:50
 * @FilePath: \chou_home\src\components\LuckyCardPopup\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="popup-overlay" @click="$emit('close')">
      <div class="popup-content" @click.stop>
        <div class="popup-header">
          <h3>用户详情</h3>
          <button class="close-btn" @click="$emit('close')">×</button>
        </div>
        
        <!-- 展示person对象中的所有数据 -->
        <div class="popup-body">
          <!-- ID（唯一标识） -->
          <div class="info-row">
            <span class="info-label">ID：</span>
            <span class="info-value">{{ person.uid }}</span>
          </div>
          
          <!-- 姓名 -->
          <div class="info-row">
            <span class="info-label">姓名：</span>
            <span class="info-value">{{ person.name || '未填写' }}</span>
          </div>
          
          <!-- 部门 -->
          <div class="info-row">
            <span class="info-label">部门：</span>
            <span class="info-value">{{ person.department || '未填写' }}</span>
          </div>
          
          <!-- 身份 -->
          <div class="info-row">
            <span class="info-label">身份：</span>
            <span class="info-value">{{ person.identity || '未填写' }}</span>
          </div>
          
          <!-- 其他可能的字段（根据IPersonConfig类型扩展） -->
          <div class="info-row" v-if="person.email">
            <span class="info-label">邮箱：</span>
            <span class="info-value">{{ person.email }}</span>
          </div>
          <div class="info-row" v-if="person.phone">
            <span class="info-label">电话：</span>
            <span class="info-value">{{ person.phone }}</span>
          </div>
        </div>
        
        <div class="popup-footer">
          <button @click="$emit('close')">关闭</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineProps, defineEmits } from 'vue'
  import { IPersonConfig } from '@/types/storeType'
  
  // 明确接收person对象，包含所有数据（id及其他信息）
  const props = defineProps<{
    person: IPersonConfig // IPersonConfig中应包含uid（id）及其他字段
  }>()
  
  // 定义关闭事件
  const emit = defineEmits<{
    (e: 'close'): void
  }>()
  </script>
  
  <style scoped>
  .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .popup-content {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
  }
  
  .popup-body {
    margin-bottom: 20px;
  }
  
  .info-row {
    margin: 12px 0;
    line-height: 1.5;
  }
  
  .info-label {
    display: inline-block;
    width: 80px;
    font-weight: 600;
    color: #333;
  }
  
  .info-value {
    color: #666;
  }
  
  .popup-footer {
    text-align: right;
  }
  
  .popup-footer button {
    padding: 8px 16px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .popup-footer button:hover {
    background: #359e75;
  }
  </style>